<template>
    <div>
        <el-descriptions title="我的详细信息" :column="1" border>
            <el-descriptions-item label="用户名" label-align="left" align="left" width="150px">
                {{ dataInfo.username }}
            </el-descriptions-item>
            <el-descriptions-item label="真实姓名" label-align="left" align="left" width="150px">
                {{ dataInfo.realname }}
            </el-descriptions-item>
            <el-descriptions-item label="电话" label-align="left" align="left" width="150px">
                {{ dataInfo.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="最近登录时间" label-align="left" align="left" width="150px">
                {{ dataInfo.gmtLastLogin }}
            </el-descriptions-item>
            <el-descriptions-item label="角色" label-align="left" align="left" width="150px">
                {{ dataInfo.roles }}
            </el-descriptions-item>
            <el-descriptions-item label="状态" label-align="left" align="left" width="150px">
                <el-tag size="small" v-if=" dataInfo.status === 1">正常</el-tag>
                <el-tag size="small" v-else>异常</el-tag>
            </el-descriptions-item>
            
        </el-descriptions>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useUserInfoStore } from '@/stores/userInfo'
import type { UserInfo } from "@/stores/userInfo"

const userInfo = useUserInfoStore()
const dataInfo = ref({} as UserInfo)
onMounted(() => {
    console.log(userInfo.userInfo)
    dataInfo.value = { ...userInfo.userInfo }
})
</script>

<style scoped lang="less">
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
</style>